<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北大青鸟注册验证</title>
		<style>
			span{
				color: red;
				
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				
				$(".validate").blur(function(){
					let reg = new RegExp("^"+this.pattern+"$",'ig');
					if(reg.test(this.value)){
						$(this).next().html("");
					}else{
						$(this).next().html($(this).next().attr("err-msg"));
					}
				});
				
				//验证第二次密码
				$(":password[name=repass]").blur(function(){
					let pa=$("[name=pass]").val();
					if(pa!=this.value){
						$(this).next().html("两次密码输入不一致！");
					}else{
						$(this).next().empty();
					}
				});
				
				//验证码不为空
				$(":text[name=text]").blur(function(){
					if(!this.val){
						$(this).next().html("");
					}
					else{
						$(this).next().html($(this).next().attr("err-msg"));
					}
				});
				
				$(":submit").click(function(){
					$(":submit").click(function(){
						$(".validate").trigger("blur");
					});
					
					if($("[name=accept]").is(":checked")==false){
						$("[name=accept]").parent().children("span").html("必须同意协议");
						return false;
					}
					return true;
				});
				
				
			});
		</script>
	</head>
	<body>
		<form action="2.html">
			<p>
			<label>邮箱：</label>
			<input type="email" name ="email" placeholder="请输入邮箱： " class="validate" required pattern="[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)"/>
			<span err-msg = "邮箱格式不正确"></span>
			</p>
			<p>
			<label>用户名：</label>
			<input type="text" name ="username" placeholder="请输入用户名：" class="validate" required pattern="[\d|a-z|A-Z|\u4e00-\u9fa5]{4,12}" />
			<span err-msg = "输入4-12位字符、英文、数字或者中文"></span>
			</p>
			<p>
			<label>密码：</label>
			<input type="password" name ="pass" placeholder="请输入登录密码：" class="validate" required pattern="[\d|a-z|A-Z]{6,16}" />
			<span err-msg = "输入6-16位字符或数字、字母，区分大小写"></span>
			</p>
			<p>
			<label>再次输入密码：</label>
			<input type="password" name ="repass" placeholder="请再次输入登录密码：" class="validate" required pattern="[\d|a-z|A-Z]{6,16}" />
			<span err-msg = "输入6-16位字符或数字、字母，区分大小写"></span>
			</p>
			<p>
			<label>请输入验证码：</label>
			<input type="text" name ="text" required placeholder="请输入右侧验证码："/>
			<span err-msg = "验证码不能为空"></span>
			</p>
			<p>
				<input type="checkbox" name="accept" value="yes" required>
				<label>同意<a href="#">用户服务条款</a></label>
				<span err-msg="请同意服务条款"></span>
			</p>
			<p>
				<button type="submit">注册</button>
			</p>
		</form>

	</body>
</html>
